import React from 'react';
import classNames from 'classnames';
import Icon from '../Icon';
import Button from '../Button';
import Draggable from 'react-draggable';

let nextVisible;
class Modal extends React.Component {
    displayName = 'Modal';

    state = {
        loading: false,
        position: null
    }

    onConfirm = async (flag) => {
        let ret = flag;
        if (flag && this.props.loading) {
            this.setState({
                loading: true
            });
        }
        if (this.props.onConfirm) {
            ret = await this.props.onConfirm(flag);
            if (flag && this.props.loading) {
                this.setState({
                    loading: false
                });
            }
        }
        if (ret) {
            this.close();
        }
    }

    close = () => {
        this.props.onClose && this.props.onClose();
    }

    onDrag = (e, data) => {
        this.setState({
            position: {x: data.x, y: data.y}
        });
    }

    componentDidMount () {
        this.center();
    }

    center () {
        const rect = this.wrap.getBoundingClientRect();
        this.setState({
            position: {
                x: -rect.width / 2,
                y: -rect.height / 2
            }
        });
    }

    shouldComponentUpdate (nextProps) {
        if (nextProps.visible !== this.props.visible) {
            this.shouldRePosition = true;
        }
        return true;
    }

    componentDidUpdate () {
        if (this.shouldRePosition) {
            this.shouldRePosition = false;
            this.center();
        }
    }

    render () {
        const {className, draggable, style, visible, title, closeable, children, okText, cancleText, footer} = this.props;
        const clazzName = classNames('cm-dialog', className, {
            'cm-dialog-visible': visible
        });

        return <Draggable
            handle='.cm-dialog-header'
            disabled={!draggable}
            bounds='.cm-dialog-shadow'
            position={this.state.position}
            onDrag={this.onDrag}
        >
            <div className={clazzName} style={style} ref={f => this.wrap = f}>
                <div className='cm-dialog-header'>
                    <div className='cm-dialog-title'>{title}</div>
                    {
                        closeable
                            ? <span className='cm-dialog-close' onClick={this.close}>
                                <Icon name='ios-close'/>
                            </span>
                            : null
                    }
                </div>
                <div className='cm-dialog-body'>
                    {children}
                </div>
                {
                    footer
                        ? <div className='cm-dialog-footer'>
                            <Button theme='default' className='mr-10' onClick={this.onConfirm.bind(this, false)}>{cancleText}</Button>
                            <Button theme='primary' loading={this.state.loading} onClick={this.onConfirm.bind(this, true)}>{okText}</Button>
                        </div>
                        : null
                }
            </div>
        </Draggable>;
    }
}

export default Modal;
